@CHARSET "UTF-8";
html, body {
	margin: 0;
    overflow: hidden;
}
.container_lantern {
	height: 100%;	
}
.before {
	min-height: 100%;
}
.after{
	display: none;
}
figure{
	display: inline-block;
	position: absolute;
	cursor: pointer;
	border: 0;
}
.light {
    border-radius: 50%;
	border: none;
    z-index: -1;

    box-shadow: 0px 0px 150px 60px #F8EE34,inset 0px 0px 206px 34px #F8EE34;
    -webkit-box-shadow: 0px 0px 150px 60px #F8EE34,inset 0px 0px 206px 34px #F8EE34;
    -moz-box-shadow: 0px 0px 150px 60px #F8EE34,inset 0px 0px 206px 34px #F8EE34;
}
/* .lantern { */
/* 	display: inline-block; */
/* 	position: absolute; */
/* 	border-radius:100px; */
/* 	border-style: none; */
/* 	cursor: pointer; */
/* } */
.img{
	display: inline-block;
	position: absolute;
}
.lantern_example{
    display: inline-block;
    position: absolute;
    cursor: pointer;
}
.my_lantern{
    display: inline-block;
    margin: 20px 10px;
    cursor: pointer;
}

.wrapper {
    position: relative;
    display:inline-block;
}

.text {
    position: absolute;
    top: 0;
    color:#000000;
    background-color:rgba(255,255,255,0);
    width: 90%;
    height: 100%;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 50px 0;
    font-family: "Arial","微軟正黑體";
    font-weight: bolder;
}
.text:hover {
	cursor: pointer;
    opacity:1;
}


.mylanternrow{
	margin: 0 0 0 5%;
}
.my_lantern{
    bottom: 30%;
    width: 150px;
     -webkit-animation: path-z 1s 0s ease-in forwards;
            animation: path-z 1s 0s ease-in forwards;
}
.edit_hover_class{
	text-align: center;
}
.edit_hover_class img{
	width: 40px;
}

.edit_hover_class a{
	display: none;
}
.wrapper:hover .edit_hover_class a{
	display: block;
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 9999;
}

.red{
     -webkit-animation: path-a 11s 1 ease-in forwards;/*ease-in动画以低速开始。*/
            animation: path-a 11s 1 ease-in forwards;
}
@-webkit-keyframes path-a {
    0% { bottom: -30%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
    20% { -webkit-transform: rotate(4deg); }
    50% { -webkit-transform: translateX( 5px)  rotate(-12deg); }
    75% { -webkit-transform: translateX(-2px) rotate(10deg); }
    100% { bottom: 110%;
        -webkit-transform: rotate(-8deg); 
    }
}
@keyframes path-a {
  0% { bottom: -30%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
    20% { -webkit-transform: rotate(4deg);}
    50% { -webkit-transform: translateX(5px) rotate(-12deg); }
    75% { -webkit-transform: translateX(-2px) rotate(10deg); }
    100% { bottom: 110%;
        -webkit-transform: rotate(-8deg); 
    }
}
.orange{
    -webkit-animation: path-b 15s 1 ease-in forwards;
            animation: path-b 15s 1 ease-in forwards;  
}
@-webkit-keyframes path-b {
    0% {  bottom: -30%;
        -webkit-transform: translateX(0) rotate(0deg); 
    }
    20% { -webkit-transform: rotate(-8deg); }
    50% { -webkit-transform: translateX(-10px) rotate(10deg); }
    75% { -webkit-transform: translateX(5px) rotate(-8deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
}
@keyframes path-b {
    0% {  bottom: -30%;
        -webkit-transform: translateX(0) rotate(0deg); 
    }
    20% { -webkit-transform: rotate(-8deg); }
    50% { -webkit-transform: translateX(-10px) rotate(10deg); }
    75% { -webkit-transform: translateX(5px) rotate(-8deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
}
.green{
    -webkit-animation: path-c 12s 1 ease-in forwards;
            animation: path-c 12s 1 ease-in forwards;
}
@-webkit-keyframes path-c {
    0% {  bottom: -30%;
        -webkit-transform:translateX(0) rotate(0deg); 
    }
    20% { -webkit-transform: translateX(-4px) rotate(4deg); }
    50% { -webkit-transform: translateX(8px) rotate(-8deg); }
    75% { -webkit-transform: translateX(-10px) rotate(10deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(0deg); 
    }
}

@keyframes path-c {
    0% {  bottom: -30%;
        -webkit-transform: translateX(0) rotate(0deg); 
    }
    20% { -webkit-transform: translateX(-4px) rotate(4deg); }
    50% { -webkit-transform: translateX(8px) rotate(-8deg); }
    75% { -webkit-transform: translateX(-10px) rotate(10deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(0deg); 
    }
}
.blue{
     -webkit-animation: path-d 13s 1 ease-in forwards;
            animation: path-d 13s 1 ease-in forwards;
}
@-webkit-keyframes path-d {
    0% {  bottom: -30%;
        -webkit-transform: translateX(0) rotate(-4deg); 
    }
    40% { -webkit-transform: translateX(-8px) rotate(10deg); }
    85% { -webkit-transform: translateX(10px) rotate(-8deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(0); 
    }
}
@keyframes path-d {
    0% {  bottom: -30%;
        -webkit-transform:translateX(0) rotate(-4deg); 
    }
    40% { -webkit-transform: translateX(-8px) rotate(10deg); }
    85% { -webkit-transform: translateX(10px) rotate(-8deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(0); 
    }
}
.purple{
      -webkit-animation: path-e 10s 1 ease-in forwards;
            animation: path-e 10s 1 ease-in forwards;
}
@-webkit-keyframes path-e {
    0% {  bottom: -30%;
        -webkit-transform: translateX(0) rotate(-4deg); 
    }
    40% { -webkit-transform: translateX(-8px) rotate(10deg); }
    85% { -webkit-transform: translateX(10px) rotate(-8deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(0); 
    }
}
@keyframes path-e {
    0% {  bottom: -30%;
        -webkit-transform: translateX(0) rotate(-4deg); 
    }
    40% { -webkit-transform: translateX(-8px) rotate(10deg); }
    85% { -webkit-transform: translateX(10px) rotate(-8deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: translateX(0) rotate(0); 
    }
}
.custom{
     -webkit-animation: path-f 14s 1 ease-in forwards;
            animation: path-f 14s 1 ease-in forwards;
}
@-webkit-keyframes path-f {
    0% {  
        bottom: -30%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
    20% { -webkit-transform: rotate(4deg); }
    50% { -webkit-transform: translateX(5px) rotate(-12deg); }
    75% { -webkit-transform: translateX(-2px) rotate(10deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: rotate(-8deg); 
    }
}
@keyframes path-f {
    0% {  
        bottom: -30%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
    20% { -webkit-transform: rotate(4deg); }
    50% { -webkit-transform: translateX(5px) rotate(-12deg); }
    75% { -webkit-transform: translateX(-2px) rotate(10deg); }
    100% { 
        bottom: 110%;
        -webkit-transform: rotate(-8deg); 
    }
}


.lantern_example:nth-child(1){
    left: 12.5%;
}
.lantern_example:nth-child(2){
    left: 26%;
}
.lantern_example:nth-child(3){
    left: 39%;
}
.lantern_example:nth-child(4){
    left: 52%;
}
.lantern_example:nth-child(5){
    left: 64%;
}
.lantern_example:nth-child(6){
    left: 77.5%;
}
.lantern_example{
    bottom: 30%;
    width: 150px;
     -webkit-animation: path-z 1s 0s ease-in forwards;
            animation: path-z 1s 0s ease-in forwards;
}
@-webkit-keyframes path-z {
    0% {  
        bottom: 30%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
    50% { -webkit-transform: translateX(5px) rotate(-12deg); }
    100% { 
        bottom: 50%;
        -webkit-transform: rotate(-8deg); 
    }
}
@keyframes path-z {
    0% {  
        bottom: 30%;
        -webkit-transform: translateX(0) rotate(8deg); 
    }
    50% { -webkit-transform: translateX(5px) rotate(-12deg); }
    100% { 
        bottom: 50%;
        -webkit-transform: rotate(-8deg); 
    }
}
